<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt sticky-top">
            <uni-segmented-control
                :current="current"
                style-type="text"
                :values="items"
                :active-color="activeColor"
                @clickItem="onClickItem"
            />
        </view>

        <view v-if="listData.length > 0">
            <view
                v-for="(activeInfo, index) in listData"
                class="servicecard couponCard"
                :key="index"
            >
                <view style="display: flex; justify-content: space-between">
                    <view>
                        <span class="couponType">{{
                            activeType[activeInfo.activityType] || '平台券'
                        }}</span>
                        <div class="disFlex">
                            <span>
                                <span class="danwei">￥</span>
                                <span class="money">{{
                                    activeInfo.useMoney || 0
                                }}</span>
                            </span>
                            <span class="manjian">
                                满{{ activeInfo.freeMoney }}减{{
                                    activeInfo.useMoney
                                }}
                            </span>
                        </div>
                        <view
                            class="haveCount"
                            hover-class="none"
                            hover-stop-propagation="false"
                        >
                            有效期:
                        </view>
                        <view
                            class="haveCount"
                            hover-class="none"
                            hover-stop-propagation="false"
                        >
                            {{activeInfo.startTime}}-{{
                                activeInfo.endTime || ''
                            }}
                        </view>
                    </view>

                    <view>
                        <view
                            @click="status == 0 ? toUse() : ''"
                            :class="
                                status == 0
                                    ? 'btn_small'
                                    : 'disabled_btn'
                            "
                            style="margin-top: 52rpx"
                        >
                            {{ useStatus[status] }}
                            <!-- <image style="width: 20rpx; height: 20rpx" src="../../static/images/write_icon.png"></image> -->
                        </view>
                        <!-- <button :disabled="activeInfo.flag == 2"  @click="toOpen(activeInfo)" class="btn_small" style="margin-top: 32rpx">
                            展 码
                        </button> -->
                    </view>
                </view>
            </view>
        </view>
        <view class="noInfo_Img" v-else>
            <image src="../../static/images/icon_lack_message@2x.png"></image>
        </view>

         <!-- 展码二维码 -->
            <uni-popup ref="openPopup" :mask-click="false"  background-color="#fff">
                <view class="popup-content" >
                     <ayQrcode ref="qrcode"  :url="url"  :height="180" :width="170"></ayQrcode>
                    <!-- <yz-qr ref="qrPath" 
                    :text="abcde"
                    :size="size" :colorDark="colorDark" 
                    :colorLight="colorLight">
                </yz-qr> -->
                </view>
                <view class="openPopImg" hover-class="none" hover-stop-propagation="false">
                    <image class="openPopImage" src="../../static/images/closeBtn.png" @click="closeOpen"> </image>
                </view>
        
            </uni-popup>
    </view>
</template>

<script>
import {
    // drugOrder,
    // cancelOrder
    getUserCouponList,
} from '@/api/user.js';
import {
    HTTP_REQUEST_URL
} from '@/config/app.js';
import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"

export default {
    components: {
        ayQrcode
    },
    data() {
        return {
               //二维码相关参数
            modal_qr: false,
            url: '', // 要生成的二维码值
            listData: [
                // { id: 1, status: 0 },
                // { id: 2, status: 1 },
                // { id: 3, status: 2 },
            ], //优惠券列表
            items: ['待使用', '已使用', '已过期'],
            activeColor: '#52D0BB',
            current: 0,
            showLoadMore: false,
            showNoInfo: false,
            statusLoad: 'more',
            contentText: {
                contentdown: '查看更多',
                contentrefresh: '加载中...',
                contentnomore: '没有更多',
            },
            useStatus: {
                0: '待使用',
                1: '已使用',
                2: '已过期',
            },
            total: 0, //总条数
            nowCount: 0, //当前累计显示条数

            //分页结束
            // 查询参数
            queryParams: {
                pageNum: 1, //第几页
                pageSize: 10, //每页显示条数
            },
            status: '0', //状态 0：待使用，1：已使用 2：已过期
        };
    },
    onLoad: function (option) {
        // console.log(option);
        // this.showLoadMore = false;
        // this.status = option.status;
        // if (option.status) {
        //     this.current = option.status - 1;
        //     this.getList(this.status);
        // } else {
        this.getList('0');
        // }
        // console.log(this.current, '999---');
    },
    onReachBottom() {
        if (this.nowCount > 0 && this.nowCount >= this.total) {
            this.statusLoad = 'noMore';
        } else {
            this.showLoadMore = true;
            this.statusLoad = 'loading';
            this.getList();
        }
    },

    methods: {
        // // 展示二维码
        // showQrcode() {
        //     let _this = this;
        //     // this.modal_qr = true;
        //     this.$refs.openPopup.open()
        //     setTimeout(function () {
        //         _this.$refs.qrcode.crtQrCode()
        //         uni.hideLoading()
        //     }, 500)
        // },

        // //传入组件的方法
        // hideQrcode() {
        //     // this.modal_qr = false;
        // },

        //   // 关闭展码二维码
        // closeOpen() {
        //     this.hideQrcode();
        //     this.$refs.openPopup.close()
        //     this.listData=[]
        //     // 关闭后重新查询优惠券列表
        //     this.getList('0');

        // },
        // // 打开展码
        // toOpen(item) {
        //     // HTTP_REQUEST_URL + `scan?
        //     this.abcde = JSON.stringify(item.qrCodeContent)//`couponId=${item.qrCodeContent.couponId}&couponPrice=${item.qrCodeContent.couponPrice}&uid=${item.qrCodeContent.uid}&userName=${item.qrCodeContent.userName || ''}`
        //     uni.showLoading({
        //         title: '加载中',
        //     })
        //    this.showQrcode()

        // },
        onClickItem(e) {
            let _this = this;
            if (_this.current !== e.currentIndex) {
                _this.current = e.currentIndex;

                _this.nowCount = 0;
                _this.total = 0;
                _this.queryParams.pageNum = 1;
                // _this.listData = [];

                if (_this.current == 0) {
                    _this.status = 0;
                } else if (_this.current == 1) {
                    _this.status = 1;
                } else if (_this.current == 2) {
                    _this.status = 2;
                }
                // this.getList();
            }
        },
        // 使用优惠券，
        toUse() {
            uni.switchTab({
                url: '/pages/homePage/shopList',
            });
        },
        getList(val) {
            let _this = this;
            if (val) {
                _this.status = val;
            }
            console.log(this.current + '++++tab块');
            let newData;
            let listData = _this.listData;
            let nowCount = _this.nowCount;
            let pageNum = _this.queryParams.pageNum;
            uni.showLoading({
                title: '加载中',
            });
            getUserCouponList(_this.status, _this.queryParams)
                .then((res) => {
                    let listNew = [];
                    newData = listData.concat(res.rows);
                    _this.$set(_this, 'listData', newData); //使用$set可以避免this直接赋值，在组件上【有时】不及时生效的问题（偶尔会出现）
                    //设置分页
                    _this.total = res.total;
                    _this.queryParams.pageNum = pageNum + 1;
                    _this.nowCount = nowCount + res.rows.length;

                    if (pageNum == 1 && res.rows.length <= 0) {
                        _this.showNoInfo = true;
                    }

                    uni.hideLoading();
                })
                .catch((res) => {
                    uni.hideLoading();
                    this.$util.Tips({
                        title: res,
                        duration: 3000,
                    });
                });
        },
    },
};
</script>


<style scoped lang="scss">
.servicecard {
    padding: 15rpx 30rpx;
    margin: 20rpx 30rpx;
    background: linear-gradient(to right, #70c6fc, #fd4afd);

    border-radius: 10rpx;
}
.activeList {
    padding-bottom: 20rpx;
}
.couponCard {
    border-radius: 20rpx;
}
.couponType {
    background: #4ccdbc;
    color: #ffffff;
    font-size: 12px;
    padding: 0 10rpx;
    border-radius: 10rpx;
    position: relative;
    top: -24rpx;
    left: -24rpx;
}
.disFlex {
    display: flex;
}
.danwei {
    color: red;//  #4ccdbc;
    font-size: 54rpx;
}
.money {
    color:red; // #4ccdbc;
    font-size: 50rpx;
    display: inline-block;
    border-right: 1px dashed #cccccc;
    padding-right: 20rpx;
}
.manjian {
    font-size: 38rpx;
    color:red;// #4ccdbc;
    // margin: 20px 20px 0;
    margin-left: 20rpx;
    margin-top: 20rpx;
}
.haveCount {
    margin: 10rpx auto 0;
    font-size: 12px;
    color:#ffffff;// #9c9b9b;
}

.btn_small {
   
}

.disabled_btn {
     font-size: 27rpx;
    color: #4ccdbc;
    padding: 2rpx 15rpx;
    text-align: center;
    border-radius: 10rpx;
    border: 1px solid #4ccdbc;
    // background: -webkit-linear-gradient(#77e2a4, #4ccdbc);
    height: 50rpx;
    line-height: 50rpx;
    border: 1px solid #fff; // #9c9b9b;
    color:#fff;// #9c9b9b;
    
}
.btn_small {
    font-size: 27rpx;
    color: #ffffff;
    padding: 2rpx 15rpx;
    text-align: center;
    border-radius: 40rpx;
    background: -webkit-linear-gradient(#77e2a4, #4ccdbc);
    height: 50rpx;
    line-height: 50rpx;
}
.openPopImg{
    margin: 40rpx auto 0;
    width: 40px;
}
.openPopImage{
    width: 100%;
    height: 40px;
    z-index: 99;
}
.popup-content {
    margin: 20px;
}
</style>